React 동시 렌더링: Fiber 아키텍처 및 작업 루프 분석을 통한 성능 향상

프론트엔드 개발에서 지배적인 세력인 React는 점점 더 복잡하고 상호 작용적인 사용자 인터페이스의 요구를 충족하기 위해 지속적으로 진화해 왔습니다. 이러한 진화에서 가장 중요한 발전 중 하나는 React 16에서 도입된 동시 렌더링입니다. 이 패러다임 전환은 React가 업데이트를 관리하고 컴포넌트를 렌더링하는 방식을 근본적으로 변경하여 상당한 성능 향상을 실현하고 더 반응성이 뛰어난 사용자 경험을 가능하게 했습니다. 이 기사에서는 동시 렌더링의 핵심 개념을 자세히 살펴보고 Fiber 아키텍처와 작업 루프를 탐구하며 이러한 메커니즘이 더욱 원활하고 효율적인 React 애플리케이션에 어떻게 기여하는지에 대한 통찰력을 제공합니다.

동시 렌더링의 필요성 이해

동시 렌더링 이전에는 React가 동기 방식으로 작동했습니다. 업데이트(예: 상태 변경, prop 업데이트)가 발생하면 React는 전체 컴포넌트 트리를 단일 중단 없는 작업으로 렌더링을 시작합니다. 이러한 동기 렌더링은 특히 대규모 컴포넌트 트리 또는 계산 비용이 많이 드는 작업을 처리할 때 성능 병목 현상을 초래할 수 있습니다. 이러한 렌더링 기간 동안 브라우저는 응답하지 않아 엉망이고 실망스러운 사용자 경험을 초래합니다. 이는 종종 "메인 스레드 차단"이라고 합니다.

사용자가 텍스트 필드에 입력하는 시나리오를 상상해 보세요. 입력된 텍스트를 표시하는 컴포넌트가 크고 복잡한 컴포넌트 트리의 일부인 경우 각 키 입력 시 메인 스레드를 차단하는 다시 렌더링이 트리거될 수 있습니다. 이로 인해 눈에 띄는 지연과 좋지 않은 사용자 경험이 발생합니다.

동시 렌더링은 React가 렌더링 작업을 더 작고 관리 가능한 작업 단위로 분할하여 이 문제를 해결합니다. 이러한 단위는 필요에 따라 우선 순위가 지정되고 일시 중지되고 다시 시작될 수 있으므로 React가 사용자 입력 또는 네트워크 요청과 같은 다른 브라우저 작업과 렌더링 작업을 인터리빙할 수 있습니다. 이 접근 방식은 메인 스레드가 장기간 차단되는 것을 방지하여 더욱 반응성이 뛰어나고 유동적인 사용자 경험을 제공합니다. React의 렌더링 프로세스에 대한 멀티태스킹이라고 생각하십시오.

Fiber 아키텍처 소개

동시 렌더링의 핵심에는 Fiber 아키텍처가 있습니다. Fiber는 React의 내부 조정 알고리즘을 완전히 재구현한 것입니다. 이전의 동기 조정 프로세스와 달리 Fiber는 업데이트 및 렌더링 컴포넌트 관리에 보다 정교하고 세분화된 접근 방식을 도입합니다.

Fiber란 무엇인가요?

Fiber는 개념적으로 컴포넌트 인스턴스의 가상 표현으로 이해할 수 있습니다. React 애플리케이션의 각 컴포넌트는 해당 Fiber 노드와 연결됩니다. 이러한 Fiber 노드는 컴포넌트 트리를 미러링하는 트리 구조를 형성합니다. 각 Fiber 노드는 컴포넌트, props, 자식 및 현재 상태에 대한 정보를 유지합니다. 결정적으로 해당 컴포넌트에 대해 수행해야 하는 작업에 대한 정보도 유지합니다.

Fiber 노드의 주요 속성은 다음과 같습니다.

• type: 컴포넌트 유형(예: div, MyComponent).
• key: 컴포넌트에 할당된 고유 키(효율적인 조정을 위해 사용됨).
• props: 컴포넌트에 전달된 props.
• child: 컴포넌트의 첫 번째 자식을 나타내는 Fiber 노드에 대한 포인터.
• sibling: 컴포넌트의 다음 형제를 나타내는 Fiber 노드에 대한 포인터.
• return: 컴포넌트의 부모를 나타내는 Fiber 노드에 대한 포인터.
• stateNode: 실제 컴포넌트 인스턴스에 대한 참조(예: 호스트 컴포넌트의 DOM 노드, 클래스 컴포넌트 인스턴스).
• alternate: 컴포넌트의 이전 버전을 나타내는 Fiber 노드에 대한 포인터.
• effectTag: 컴포넌트에 필요한 업데이트 유형을 나타내는 플래그(예: 배치, 업데이트, 삭제).

Fiber 트리

Fiber 트리는 애플리케이션 UI의 현재 상태를 나타내는 영구적인 데이터 구조입니다. 업데이트가 발생하면 React는 업데이트 후 UI의 원하는 상태를 나타내는 새로운 Fiber 트리를 백그라운드에서 생성합니다. 이 새로운 트리를 "작업 중" 트리라고 합니다. 작업 중 트리가 완료되면 React는 현재 트리와 교환하여 사용자에게 변경 사항을 표시합니다.

이중 트리 방식을 통해 React는 차단되지 않는 방식으로 렌더링 업데이트를 수행할 수 있습니다. 작업 중 트리가 백그라운드에서 구성되는 동안 현재 트리가 사용자에게 계속 표시됩니다. 이렇게 하면 업데이트 중에 UI가 정지되거나 응답하지 않는 것을 방지할 수 있습니다.

Fiber 아키텍처의 장점

• 중단 가능한 렌더링: Fiber를 사용하면 React가 렌더링 작업을 일시 중지하고 다시 시작할 수 있으므로 사용자 상호 작용의 우선 순위를 지정하고 메인 스레드가 차단되는 것을 방지할 수 있습니다.
• 증분 렌더링: Fiber를 사용하면 React가 렌더링 업데이트를 더 작은 작업 단위로 분할할 수 있으며, 시간이 지남에 따라 증분 방식으로 처리할 수 있습니다.
• 우선 순위 지정: Fiber를 사용하면 React가 다양한 유형의 업데이트에 우선 순위를 지정하여 중요한 업데이트(예: 사용자 입력)가 덜 중요한 업데이트(예: 백그라운드 데이터 페치)보다 먼저 처리되도록 할 수 있습니다.
• 향상된 오류 처리: Fiber를 사용하면 렌더링 중에 오류를 더 쉽게 처리할 수 있습니다. 오류가 발생할 경우 React가 이전의 안정적인 상태로 롤백할 수 있기 때문입니다.

작업 루프: Fiber가 동시성을 가능하게 하는 방법

작업 루프는 동시 렌더링을 구동하는 엔진입니다. Fiber 트리를 탐색하고 각 Fiber 노드에서 작업을 수행하고 UI를 증분 방식으로 업데이트하는 재귀 함수입니다. 작업 루프는 다음 작업을 담당합니다.

• 처리할 다음 Fiber 선택.
• Fiber에서 작업 수행(예: 새 상태 계산, props 비교, 컴포넌트 렌더링).
• 작업 결과로 Fiber 트리 업데이트.
• 더 많은 작업 예약.

작업 루프의 단계

작업 루프는 두 가지 주요 단계로 구성됩니다.

1. 렌더링 단계(조정 단계라고도 함): 이 단계는 작업 중 Fiber 트리를 빌드하는 역할을 합니다. 이 단계에서 React는 Fiber 트리를 탐색하고 현재 트리와 원하는 상태를 비교하여 수행해야 하는 변경 사항을 결정합니다. 이 단계는 비동기적이며 중단 가능합니다. DOM에서 *변경해야 할* 사항을 결정합니다.
2. 커밋 단계: 이 단계는 실제 DOM에 변경 사항을 적용하는 역할을 합니다. 이 단계에서 React는 DOM 노드를 업데이트하고, 새 노드를 추가하고, 이전 노드를 제거합니다. 이 단계는 동기적이며 중단할 수 없습니다. 실제로 DOM을 *변경합니다*.

작업 루프가 동시성을 가능하게 하는 방법

동시 렌더링의 핵심은 렌더링 단계가 비동기적이고 중단 가능하다는 사실에 있습니다. 즉, React는 언제든지 렌더링 단계를 일시 중지하여 브라우저가 사용자 입력 또는 네트워크 요청과 같은 다른 작업을 처리하도록 할 수 있습니다. 브라우저가 유휴 상태가 되면 React는 중단된 부분부터 렌더링 단계를 다시 시작할 수 있습니다.

이 렌더링 단계를 일시 중지하고 다시 시작하는 기능을 통해 React는 렌더링 작업을 다른 브라우저 작업과 인터리빙할 수 있어 메인 스레드가 차단되지 않고 더욱 반응성이 뛰어난 사용자 경험을 보장합니다. 반면에 커밋 단계는 UI의 일관성을 보장하기 위해 동기적이어야 합니다. 그러나 커밋 단계는 일반적으로 렌더링 단계보다 훨씬 빠르므로 일반적으로 성능 병목 현상이 발생하지 않습니다.

작업 루프에서 우선 순위 지정

React는 우선 순위 기반 스케줄링 알고리즘을 사용하여 먼저 처리할 Fiber 노드를 결정합니다. 이 알고리즘은 중요도에 따라 각 업데이트에 우선 순위 수준을 할당합니다. 예를 들어 사용자 입력에 의해 트리거된 업데이트는 일반적으로 백그라운드 데이터 페치에 의해 트리거된 업데이트보다 높은 우선 순위가 할당됩니다.

작업 루프는 항상 가장 높은 우선 순위의 Fiber 노드를 먼저 처리합니다. 이렇게 하면 중요한 업데이트가 신속하게 처리되어 반응성이 뛰어난 사용자 경험을 제공합니다. 덜 중요한 업데이트는 브라우저가 유휴 상태일 때 백그라운드에서 처리됩니다.

이 우선 순위 지정 시스템은 특히 수많은 동시 업데이트가 있는 복잡한 애플리케이션에서 원활한 사용자 경험을 유지하는 데 매우 중요합니다. 사용자가 검색 창에 입력하는 동안 애플리케이션이 제안된 검색어 목록을 페치하여 표시하는 시나리오를 생각해 보십시오. 텍스트 필드가 반응성을 유지하도록 사용자 입력을 처리하는 업데이트의 우선 순위가 지정되어야 하는 반면, 제안된 검색어와 관련된 업데이트는 백그라운드에서 처리할 수 있습니다.

동시 렌더링의 실제 사례

동시 렌더링이 React 애플리케이션의 성능과 사용자 경험을 어떻게 향상시킬 수 있는지 몇 가지 실제 예를 살펴보겠습니다.

1. 사용자 입력 디바운싱

사용자가 입력할 때 검색 결과를 표시하는 검색 창을 생각해 보세요. 동시 렌더링이 없으면 각 키 입력 시 전체 검색 결과 목록이 다시 렌더링되어 성능 문제와 엉망인 사용자 경험을 초래할 수 있습니다.

동시 렌더링을 사용하면 사용자가 짧은 시간 동안 입력을 중지할 때까지 검색 결과 렌더링을 지연시키기 위해 디바운싱을 사용할 수 있습니다. 이렇게 하면 React가 사용자 입력의 우선 순위를 지정하고 UI가 응답하지 않게 되는 것을 방지할 수 있습니다.

다음은 단순화된 예입니다.

import React, { useState, useCallback } from 'react';

function SearchBar() {
 const [searchTerm, setSearchTerm] = useState('');

 const debouncedSearch = useCallback(
 debounce((value) => {
 // Perform search logic here
 console.log('Searching for:', value);
 }, 300),
 []
 );

 const handleChange = (event) => {
 const value = event.target.value;
 setSearchTerm(value);
 debouncedSearch(value);
 };

 return (
 
 );
}

// Debounce function
function debounce(func, delay) {
 let timeout;
 return function(...args) {
 const context = this;
 clearTimeout(timeout);
 timeout = setTimeout(() => func.apply(context, args), delay);
 };
}

export default SearchBar;

이 예에서 debounce 함수는 사용자가 300밀리초 동안 입력을 중지할 때까지 검색 논리 실행을 지연시킵니다. 이렇게 하면 필요한 경우에만 검색 결과가 렌더링되어 애플리케이션 성능이 향상됩니다.

2. 이미지 지연 로딩

큰 이미지를 로드하면 웹 페이지의 초기 로드 시간에 상당한 영향을 미칠 수 있습니다. 동시 렌더링을 사용하면 뷰포트에 표시될 때까지 이미지 로드를 연기하기 위해 지연 로딩을 사용할 수 있습니다.

이 기술은 사용자가 페이지와 상호 작용을 시작하기 전에 모든 이미지가 로드될 때까지 기다릴 필요가 없으므로 애플리케이션의 체감 성능을 크게 향상시킬 수 있습니다.

다음은 react-lazyload 라이브러리를 사용하는 단순화된 예입니다.

import React from 'react';
import LazyLoad from 'react-lazyload';

function ImageComponent({ src, alt }) {
 return (
 Loading...
}>
 
 
 );
}

export default ImageComponent;

이 예에서 LazyLoad 컴포넌트는 이미지가 뷰포트에 표시될 때까지 이미지 로드를 지연시킵니다. placeholder prop을 사용하면 이미지가 로드되는 동안 로딩 표시기를 표시할 수 있습니다.

3. 데이터 페치를 위한 Suspense

React Suspense를 사용하면 데이터를 로드하는 동안 컴포넌트 렌더링을 "일시 중단"할 수 있습니다. 이는 API에서 데이터를 기다리는 동안 로딩 표시기를 표시하려는 데이터 페치 시나리오에 특히 유용합니다.

Suspense는 동시 렌더링과 원활하게 통합되어 React가 데이터 로딩의 우선 순위를 지정하고 UI가 응답하지 않게 되는 것을 방지할 수 있습니다.

다음은 단순화된 예입니다.

import React, { Suspense } from 'react';

// A fake data fetching function that returns a Promise
const fetchData = () => {
 return new Promise(resolve => {
 setTimeout(() => {
 resolve({ data: 'Data loaded!' });
 }, 2000);
 });
};

// A React component that uses Suspense
function MyComponent() {
 const resource = fetchData();
 return (
 Loading...